<template>
  <div class="wrap">
    <div class="loading-wrap">
      <p>loading test</p>
      <button @click="showLoading">普通loading</button>
      <button @click="showTextLoading">带文字的loading</button>
      <button @click="hideLoading" class="closebtn">关闭Loading</button>
    </div>
  </div>
</template>


<script>
export default {
  methods: {
    showLoading: function() {
      this.$loadPop.show()
    },
    showTextLoading: function() {
      this.$loadPop.show({
        text: '加载中...'
      })
    },
    hideLoading: function() {
      this.$loadPop.hide()
    }
  }
}
</script>

<style lang="less">
.slider {
  line-height: 400px;
  font-size: 30px;
  color: #fff;
}

.loading-wrap {
  margin-top: 40px;
  text-align: center;
  p {
    margin-top: 20px;
    font-size: 48px;
  }
}

button {
  display: block;
  width: 296px;
  height: 64px;
  background-color: #3ec0e4;
  text-align: center;
  line-height: 64px;
  margin: 60px;
  border: none;
  outline: none;
  border-radius: 14px;
  color: #fff;
  font-size: 28px;
}

.closebtn {
  position: relative;
  z-index: 9999999;
}
</style>